<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>{{title}}</title>
<meta name="Keywords" content=""/>
<meta name="Description" content=""/>
<!--浏览器渲染设置-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<!--各平台个性化视觉设置(自行补充)-->
<link rel="shortcut icon" type="image/x-icon" href="../static/common/brower/favicon.ico"/>
<link rel="apple-touch-icon-precomposed" href="../static/common/brower/apple-touch-icon.png">
<link rel="icon" sizes="192x192" href="../static/common/brower/apple-touch-icon.png">
<!--移动端特性设置-->
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="My WebAPP">
<!--项目全局CSS资源引用-->
<link rel="stylesheet" href="../../static/lib/jqueryP/rui/rui.min.css" />
<link rel="stylesheet" href="../../static/common/common.css" />
<!--项目全局JS资源引用-->
<script src="../../static/require.js"></script>
<script src="../../static/requireConfig.js"></script>
<!-- --------------------------------页面模板公用头部结束-------------------------------- -->
<link rel="stylesheet" type="text/css" href="../../lib/zTree/css/zTreeStyle/zTreeStyle.css"/>
<style type="text/css">
/* tree管理 */
.pageBody {
	overflow: hidden;
}
.tree_manager { padding:10px; background:#fff;}
.tree_manager .col { width:50%; float:left; overflow:hidden;}
.tree_manager .col.lf { width:30%;}
.tree_manager .col.rt { width:70%; overflow-y:auto;}
.tree_manager .btngroup { padding-bottom:10px;}
.tree_manager .btngroup .btn { margin-right:10px;}

.tree_manager .form_main { padding: 20px;}
.tree_manager .form_main dt { text-align:left; display:block; width:100%; float:none;}
.tree_manager .form_main dd { float:none; display:block; margin-left:0px;}
.tree_manager .form_main textarea { width:100%;}
.tree_manager .form_main .w80 { width:80px;}

	.ztree { overflow-y:auto; border:1px solid #ddd;}
	form { margin-bottom:0px;}
	.form_main { padding-bottom:0px;}
	.form_main dl:last-child { padding-bottom:0px;}
</style>
</head>
<body>

<div class="pageHeader">
	<h3>角色管理</h3>
</div>

<div class="pageBody">
	
	<div class="tree_manager">
	    	<div class="col lf">
	        	<div class="btngroup">
	            	<a href="#here" class="btn btn-blue">添加用户组</a><a href="#here" class="btn">删除</a>
	            </div>
	        	<ul id="treeDemo" class="ztree"></ul>
	        </div>
	        <div class="col rt">
	        	<form action="" method="post">
	            <div class="form_main">
	                <dl>
	                    <dt><i>*</i>用户组名称：</dt>
	                    <dd>
	                        <div>
	                            <input type="text"/>
	                        </div>
	                        <small>这里是业务说明，根据需要选用</small>
	                    </dd>
	                </dl>
	                <dl>
	                    <dt><i>*</i>权限分配：</dt>
	                    <dd>
	                        <div>
	                            	<ul id="roleTree" class="ztree"></ul>
	                        </div>
	                        <small>这里是业务说明，根据需要选用</small>
	                    </dd>
	                </dl>
	                <dl>
	                    <dd>
	                        <div>
	                            <button type="submit" class="btn btn-blue">保存</button>
	                            <button type="reset" class="btn">重置</button>
	                        </div>
	                    </dd>
	                </dl>
	            </div>
	            </form>
	        </div>
	
	</div>
</div>

<!--当前页面私有JS-->
<script type="text/javascript">
	require(['common', 'zTree'], function(){
		var setting = {	};

		var zNodes =[
			{ name:"父节点1 - 展开", open:true,
				children: [
					{ name:"父节点11 - 折叠",
						children: [
							{ name:"叶子节点111"},
							{ name:"叶子节点112"},
							{ name:"叶子节点113"},
							{ name:"叶子节点114"}
						]},
					{ name:"父节点12 - 折叠",
						children: [
							{ name:"叶子节点121"},
							{ name:"叶子节点122"},
							{ name:"叶子节点123"},
							{ name:"叶子节点124"}
						]},
					{ name:"父节点13 - 没有子节点", isParent:true}
				]},
			{ name:"父节点2 - 折叠",
				children: [
					{ name:"父节点21 - 展开", open:true,
						children: [
							{ name:"叶子节点211"},
							{ name:"叶子节点212"},
							{ name:"叶子节点213"},
							{ name:"叶子节点214"}
						]},
					{ name:"父节点22 - 折叠",
						children: [
							{ name:"叶子节点221"},
							{ name:"叶子节点222"},
							{ name:"叶子节点223"},
							{ name:"叶子节点224"}
						]},
					{ name:"父节点23 - 折叠",
						children: [
							{ name:"叶子节点231"},
							{ name:"叶子节点232"},
							{ name:"叶子节点233"},
							{ name:"叶子节点234"}
						]}
				]},
			{ name:"父节点3 - 没有子节点", isParent:true}

		];

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			$.fn.zTree.init($("#roleTree"), setting, zNodes);
		});
		
		
		
		$(function(){
			//
			setTimeout('resize_tree()',1000);
			
			window.onresize = function() {
				setTimeout('resize_tree()',1000);
			}
		
			
		
		});
		
	})
	
	//树维护尺寸重置
		function resize_tree(){
			contH = $(window).outerHeight();
			leftH = contH - 60;
			rightH = contH - 300;
			$('#treeDemo').height(leftH);
			$('#roleTree').height(rightH);
		}
</script>

<!-- --------------------------------页面模板公用底部开始-------------------------------- -->
</body>
</html>